<template>
  <el-header class="right-header" height="max-content">
    <Header />
  </el-header>
  <div class="p-5 bg-[#e8e8f1] flex-1">
    <router-link class="flex justify-between text-[#283D58]" to="/settings">
      <div class="flex items-center cursor-pointer">
        <el-icon>
          <ArrowLeftBold />
        </el-icon>
        <p class="pl-5">{{ $t("设置") }}</p>
      </div>
    </router-link>
    <el-card class="my-4">
      <div class="w-[80%]">
        <div class="flex items-start justify-start">
          <div class="w-[40px]">
            <el-icon color="#6a747f" size="26"><WarningFilled /></el-icon>
          </div>
          <div class="flex flex-col ml-2">
            <p class="text-[#333] font-medium mb-2">
              {{ $t("什么是验证器应用？") }}
            </p>
            <p class="text-sm">
              {{
                $t(
                  "您可以在手机或平板上使用Google Authenticator App生成实时的验证码。当您完成设置后，即使在离线模式下，您也可以通过该App收到实时验证码。"
                )
              }}
            </p>
          </div>
        </div>
        <!-- <el-alert
          title="什么是验证器应用？"
          type="info"
          description="您可以在手机或平板上使用Google Authenticator App生成实时的验证码。当您完成设置后，即使在离线模式下，您也可以通过该App收到实时验证码。"
          show-icon
          :closable="false"
        /> -->
        <el-divider />
        <div class="flex pl-12 my-6">
          <div class="w-44">{{ $t("二维码扫描") }}</div>
          <div class="flex items-start justify-between flex-1">
            <div
              class="flex flex-col items-start justify-between"
              style="height: 100%"
            >
              <p class="flex-1">{{ $t("打开您的验证器应用") }}</p>
              <p class="flex-1">1. {{ $t("在应用内选择添加帐户") }}</p>
              <p class="flex-1">
                2. {{ $t("使用您移动设备的摄像头扫描下方二维码") }}
              </p>
            </div>
            <div>
              <img
                :src="qrcode"
                alt="Google Authenticator QR Code"
                style="width: 150px; height: 150px"
              />
            </div>
          </div>
        </div>
        <el-divider />
        <div class="flex pl-12">
          <div class="w-44">{{ $t("手动添加密钥") }}</div>
          <div>
            <p>
              {{
                $t("除扫描二维码外，您也可以在身份验证器应用中手动填写验证密钥")
              }}
            </p>
            <div class="flex items-center mt-5">
              <el-input v-model="input" disabled style="width: 300px" />
              <el-icon
                size="20"
                color="#4684fe"
                class="ml-5 cursor-pointer"
                @click="copyToClipboard"
              >
                <CopyDocument />
              </el-icon>
            </div>
          </div>
        </div>
        <div class="flex pl-12" style="padding-top: 40px">
          <div class="w-44">{{ $t("输入验证码") }}</div>
          <div>
            <el-input
              v-model="input_code"
              size="large"
              class="mb-10"
              style="width: 300px"
              :placeholder="$t('6位数字验证码')"
            />
          </div>
        </div>
        <div class="flex">
          <div class="w-56"></div>
          <div>
            <el-button
              type="primary"
              class="mb-4"
              style="width: 300px"
              size="large"
              @click="verifyAndActivate"
            >
              {{ $t("验证并激活") }}
            </el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script setup>
// 获取谷歌验证器密钥googleAuthSecretApi
// 绑定谷歌验证器bindGoogleAuthApi
// 校验google验证器checkGoogleAuthApi
// 打开google验证器选项openGoogleAuthApi
import {
  googleAuthSecretNewApi,
  bindGoogleAuthNewApi,
} from "@/api/gooleSettings/index";
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const router = useRouter();
const input = ref("");
const qrcode = ref("");
const input_code = ref("");
const copyToClipboard = () => {
  navigator.clipboard
    .writeText(input.value)
    .then(() => {
      showSuccessMessage(t("复制成功"));
    })
    .catch((error) => {
      return false;
      //    console.error("复制失败: ", error);
    });
  const showSuccessMessage = (message) => {
    ElMessage({
      showClose: true,
      message: message,
      type: "success",
    });
  };
};
const getGoogleAuthSecret = async () => {
  try {
    const response = await googleAuthSecretNewApi();
    input.value = response.secret;
    qrcode.value = response.qrcode;
  } catch (error) {
    return false;
    //    console.error("请求谷歌验证器密钥失败: ", error);
  }
};
const fetchData = async () => {
  await Promise.all([getGoogleAuthSecret()]);
};
const verifyAndActivate = async () => {
  const code = input_code.value;
  //  console.log(code);
  try {
    const response = await bindGoogleAuthNewApi({ code });
    ElMessage({
      showClose: true,
      message: t("设置成功"),
      type: "success",
    });
    router.push("/settings");
  } catch (error) {
    return false;
  }
};
onMounted(() => {
  fetchData();
});
</script>
